<template lang='pug'>

</template>
<script>
export default {
    name: 'c_tech_wall',
    data() {
        return {
            viewer:null,
            Cesium:null,
            gp_tech_ploygon:null
        }
    },
    props: {
        arrda: {
            type:Array,
            default:[]
        }
    },
    watch: {
        arrda: {
            handler(){
                if(this.Cesium && this.viewer)this.load()
            }
        },
        deep: true,
    },
    mounted () {
        let t=this
        t.$nextTick(()=>{
            t.viewer=t.$parent.viewer
            t.Cesium=t.$parent.Cesium
            let {Cesium,viewer} =this
            t.gp_tech_ploygon=new Cesium.CustomDataSource("tech_ploygon")
            viewer.dataSources.add(t.gp_tech_ploygon)
            t.load()
        })

    },
    methods:{
        load() {
            let t=this
            let {Cesium,viewer} =this   
            t.gp_tech_ploygon.entities.removeAll()
            t.arrda.forEach(opt => {
                let color=opt.color||Cesium.Color.DARKORCHID
                let hei=opt.hei||5000
                t.gp_tech_ploygon.entities.add({
                    name:'tech_polygon',
                    polygon:{
                        hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(opt.positions)),
                        height:hei,
                        outline : true,
                        outlineColor : Cesium.Color.ORANGE,
                        outlineWidth : 10,
                        material :new Cesium.ColorMaterialProperty(
                            new Cesium.CallbackProperty(function(time, x) {
                            var alp = 0.5 * Math.abs(Math.sin(new Date().getTime() / 500)) +0.2
                            return color.withAlpha(alp)
                        }, false))
                    }
                })
            })
        }
    }
}
</script>